<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form :inline="true" :model="listQuery" size="mini">
        <el-row>
          <el-col :span="24">
            <el-form-item>
              <el-date-picker
                size="small"
                :clearable="false"
                v-model="listQuery.year"
                type="year"
                placeholder="时间"
                format="yyyy"
                value-format="yyyy"
                
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click.native="handleFilter"
                >查询</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="datas"
        border
        v-loading="listLoading"
        fit
        size="mini"
        highlight-current-row
        show-summary
        :summary-method="getSummaries"
      >
        <el-table-column
          type="index"
          label="#"
          align="center"
        ></el-table-column>
        <el-table-column
          v-for="item in tableColumns"
          :label="item.title"
          :prop="item.key"
          :key="item.key"
          :width="item.width"
          :align="item.align ? item.align : 'center'"
          :formatter="dataFormatter"
        ></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import moment from "moment";

import { getProfits } from "@/api/sale";

export default {
  name: "Profit",

  data() {
    return {
      title: "利润表",
      datas: [],
      listLoading: true,
      listQuery: {
        year: moment().format("YYYY"),
      },

      tableColumns: [
        {
          key: "date",
          title: "日期",
        },
        {
          key: "sale_total_amounts",
          title: "销售总额",
        },
        {
          key: "cost_amounts",
          title: "费用总额",
          width: "140",
        },
        {
          key: "income_amounts",
          title: "其他收入总额",
        },

        {
          key: "goods_costs_amounts",
          title: "商品成本总额",
        },
        {
          key: "discount_amounts",
          title: "优惠总额",
        },
        {
          key: "profit_amounts",
          title: "利润总额",
        },
      ],
    };
  },
  computed: {},
  components: {},
  created() {
    this.getProfitList();
  },
  methods: {
    // 利润表
    getProfitList() {
      this.listLoading = true;
      getProfits(this.listQuery)
        .then((res) => {
          this.datas = res;
          this.listLoading = false;
        })
        .catch((error) => {
          console.log(error.message);
          this.$message.error("获取数据失败");
          this.listLoading = false;
        });
    },

    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 1) {
          sums[index] = "合计";
          return;
        }
        if (
          column.property === "sale_total_amounts" ||
          column.property === "cost_amounts" ||
          column.property === "income_amounts" ||
          column.property === "goods_costs_amounts" ||
          column.property === "discount_amounts" ||
          column.property === "profit_amounts"
        ) {
          const values = data.map((item) => item[column.property]);
          sums[index] = values
            .reduce((prev, curr) => {
              return prev + curr;
            }, 0)
            .toFixed(2);
          sums[index] += " 元";
        } else {
          return;
        }
      });
      return sums;
    },
    dataFormatter(row, column, cellValue, index) {
      if (
        column.property === "sale_total_amounts" ||
        column.property === "cost_amounts" ||
        column.property === "income_amounts" ||
        column.property === "goods_costs_amounts" ||
        column.property === "discount_amounts" ||
        column.property === "profit_amounts"
      ) {
        return cellValue && cellValue.toFixed(2);
      } else {
        return cellValue;
      }
    },
    // 查询
    handleFilter() {
      this.getProfitList();
    },
  },
};
</script>

<style lang='scss' scoped>
.app-container {
  .el-table {
    margin-top: 10px;
    width: 100%;
  }
}
</style>